<html>

<head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>

</body>
<script>
    /*
    type 可以是下面原生构造器：

    String
    Number
    Boolean
    Function
    Object
    Array
    Symbol
    type 也可以是一个自定义构造器函数，使用 instanceof 检测。

    当 prop 验证失败，Vue 会抛出警告 (如果使用的是开发版本)。注意 prop 会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或 methods 等实例属性还无法使用。
        */
    Vue.component('example', {
        props: {
            // 基础类型检测 (`null` 指允许任何类型)
            propA: Number,
            // 可能是多种类型
            propB: [String, Number],
            // 必传且是字符串
            propC: {
                type: String,
                required: true
            },
            // 数值且有默认值
            propD: {
                type: Number,
                default: 100
            },
            // 数组/对象的默认值应当由一个工厂函数返回
            propE: {
                type: Object,
                default: function () {
                    return {
                        message: 'hello'
                    }
                }
            },
            // 自定义验证函数
            propF: {
                validator: function (value) {
                    return value > 10
                }
            }
        }
    })
</script>

</html>